<template>
  <div class="sideMain" >
    <el-menu style="border:0px" class="el-menu-vertical-demo">
      <menuListComp :menuList="menuList" @click="selectMenuItem" />
    </el-menu>
  </div>
</template>

<script lang="ts" setup>

import { ref, reactive } from "vue";
import axios from 'axios'
import menuListComp from '~/components/layouts/MenuList.vue'

const menuList = reactive([])

function selectMenuItem(item:{}){
  console.log('触发了单击事件')
}

// 查询菜单列表
function queryMenu() {
  // 刷新用户登录状态
  axios.post('/api/index/menu/list', {}).then(
    res => {
      if (res.data != null && res.data.success) {
        loopGenerateMenuData(res.data.data.menu);
      }
    }
  )
}

function loopGenerateMenuData(arrData: Array<{}>) {
  let length = arrData.length;
  for (let i = 0; i < length; i++) {
    menuList.push(arrData[i]);
  }
}

queryMenu();

</script>
